<template>
	<view class="content">
		<!-- <u-sticky bgColor="#fff">
			<u-tabs :list="list1" @change="onTabChange"></u-tabs>
		</u-sticky> -->
		<template v-if="players.length">
			<view class="address" v-for="(item, index) in players" :key="index">
				<text class="address-tlt" style="margin-bottom: 24rpx">参赛人：{{ item.playerName }}</text>
				<view class="result">
					<u-cell-group :border="false">
						<u-cell
							:title="its.fieldName"
							:border="false"
							:value="its.fieldVal"
							v-for="its in item.fieldList"
							:key="its.fieldVal"
						></u-cell>
					</u-cell-group>
				</view>
			</view>
		</template>
		<u-empty mode="list" marginTop="150" v-else> </u-empty>

		<view class="footer">
			<button class="footer-btn" @click="onBack">返回</button>
		</view>
	</view>
</template>

<script>
const app = getApp()
export default {
	data() {
		return {
			id: '',
			info: {},
			raceInfo: {},
			players: [],
			isLock: false,
			list1: [
				{ name: '中签信息', value: 3 },
				{ name: '成绩信息', value: 4 }
			],
			current: 0
		}
	},
	async onLoad(options) {
		this.id = options.id
		this.current = 0
		this.getDetailInfo()
	},
	methods: {
		getDetailInfo() {
			/* prettier-ignore */
			this.$https( true, 'get', {
				url:`/member/order/fields/${this.id}/${this.list1[this.current].value}`,
				data: {}
			},(res) => {
				this.players = res.data || []
			})
			/* prettier-ignore */
		},

		async onDownloadFile(item) {
			/* prettier-ignore */
			this.$https( true, 'get', {
					url: `/member/result/download/${this.id}/${item.playerId}`
				},
				(res) => {
					if(!res.data){
						uni.$u.toast('暂无证书，请稍后查看！')
						return
					}
					console.log(res.data)
					uni.previewImage({
						urls: [res.data]
					});
				})
			/* prettier-ignore */
		},
		onToggle(item) {
			item.show = !item.show
			this.$forceUpdate()
		},
		onTabChange({ index }) {
			this.current = index
			this.getDetailInfo()
		},
		onBack() {
			uni.navigateBack({ delta: 1 })
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	padding: 0 0 130rpx;
	position: relative;
}
.racename {
	font-size: 32rpx;
	color: #333;
	font-weight: 550;
	padding: 20rpx 28rpx 12rpx;
}
.racetime {
	font-size: 28rpx;
	color: #999;
	padding: 0 28rpx 20rpx;
}
.address {
	padding: 24rpx 28rpx;
	width: calc(702rpx - 56rpx);
	overflow-x: hidden;
	background-color: #fff;
	border-radius: 16rpx;
	margin: 20rpx auto 24rpx;
	&-tlt {
		font-size: 28rpx;
		color: #898989;
		border-bottom: 1px solid #e9e9e9;
		display: block;
		padding-bottom: 18rpx;
		&:before {
			display: inline-block;
			content: '';
			width: 8rpx;
			height: 30rpx;
			float: left;
			margin: 4rpx 10rpx 0;
			background-color: #0071c5;
		}
	}
}
.tips {
	background-color: #d4f0ff;
	font-size: 26rpx;
	color: #0071c5;
	padding: 16rpx 20rpx;
	line-height: 36rpx;
	margin: 12rpx 6rpx 10rpx;
}
.footer {
	width: calc(100% - 48rpx);
	padding: 0 24rpx;
	height: 120rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 0;
	z-index: 9;
	border-top: 1px solid #e5e5e5;
	&-btn {
		width: 684rpx;
		height: 80rpx;
		background-color: #eee;
		border-radius: 16rpx;
		font-size: 30rpx;
		color: #666;
		margin: 0;
	}
}
.grid-label {
	color: #999;
	font-size: 26rpx;
	text-align: center;
}
.grid-text {
	color: #333;
	font-size: 30rpx;
	display: block;
	font-weight: 550;
	padding: 16rpx 0 30rpx;
	text-align: center;
}
::v-deep {
	.u-cell .u-cell__body {
		padding: 6rpx 10rpx;
		.u-cell__title-text {
			font-size: 28rpx;
			color: #898989;
			// min-width: 200rpx;
		}
		.u-cell__value {
			font-size: 28rpx;
			font-weight: 500;
			color: #231815;
		}
		.u-cell__body__content {
			width: auto;
		}
	}
	.user .u-cell-group__wrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		.u-cell {
			width: 48%;
			margin-right: 2%;
			&:nth-child(2n) {
				margin-right: 0;
				margin-left: 2%;
			}
		}
	}
	.u-button {
		margin: 0;
	}
	.u-tabs__wrapper__nav__item {
		flex: 1;
	}
}
</style>
